<template>
    <table-view :show-block-control="true">
        <el-form ref="form" :model="form" label-width="80px" :inline="true" slot="formSlot">
            <el-form-item label="活动名称">
                <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="form.region" placeholder="请选择活动区域"  size="small">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-row style="width: 217px;">
                    <el-col :span="11">  <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width:100%;"  size="small"></el-date-picker></el-col>
                    <el-col :span="2">&nbsp;-</el-col>
                    <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2"  style="width:100%;"  size="small"></el-time-picker></el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="活动名称">
                <el-input v-model="form.name"  size="small"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="form.region" placeholder="请选择活动区域"  size="small">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动名称1">
                <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="活动区域2">
                <el-select v-model="form.region" placeholder="请选择活动区域"  size="small">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间3">
                <el-row style="width: 217px;">
                    <el-col :span="11">  <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width:100%;"  size="small"></el-date-picker></el-col>
                    <el-col :span="2">&nbsp;-</el-col>
                    <el-col :span="11"> <el-time-picker placeholder="选择时间" v-model="form.date2"  style="width:100%;"  size="small"></el-time-picker></el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="活动名称4">
                <el-input v-model="form.name"  size="small"></el-input>
            </el-form-item>
            <el-form-item label="活动区域5">
                <el-select v-model="form.region" placeholder="请选择活动区域"  size="small">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <div slot="btnBeforeSlot">
            <el-button type="info" plain icon="el-icon-document-add" size="small">新增</el-button>
            <el-button type="info" plain icon="el-icon-edit" size="small">编辑</el-button>
            <el-button type="info" plain icon="el-icon-delete" size="small">删除</el-button>
            <el-button type="info" plain icon="el-icon-share" size="small">分享</el-button>
            <el-button type="info" plain icon="el-icon-setting" size="small">设置</el-button>
            <el-button type="info" plain icon="el-icon-upload2" size="small">上传</el-button>
            <el-button type="info" plain icon="el-icon-download" size="small">下载</el-button>
            <el-button type="info" plain icon="el-icon-refresh" size="small">刷新</el-button>
            <el-button type="info" plain icon="el-icon-s-custom" size="small">分配角色</el-button>
            <!--            <el-button type="info" plain icon="el-icon-s-custom" size="small">查看</el-button>-->
        </div>
        <div slot = "btnAfterSlot">
            <el-button type="info" plain icon="el-icon-search" size="small">查询</el-button>
            <el-button type="info" plain icon="el-icon-s-release" size="small">重置</el-button>
        </div>

        <div slot="tableSlot">
            <el-table
                    :data="tableData"
                    border
                    stripe
                    size="small"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="province"
                        label="省份"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="市区"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="zip"
                        label="邮编"
                        width="320">
                </el-table-column>
                <el-table-column
                        label="操作"
                        fixed="right"
                        width="300">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div slot="paginationSlot">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </table-view>
</template>

<script>
    import TableView from '@/components/tableView'
    export default {
        name: "TableViewExtComponentsExample",
        data() {
            return{
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                currentPage4: 4,
                tableData: [{
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }]
            }
        },
        components: {
            TableView
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped lang="less">

</style>